<template>
  <div class="update-wrap">
    <el-divider content-position="left">储存类型</el-divider>
    <el-radio-group v-model="top_checked">
      <el-radio-button label="阿里云 OSS"></el-radio-button>
      <el-radio-button label="腾讯云 COS"></el-radio-button>
    </el-radio-group>
    <el-divider content-position="left">储存配置</el-divider>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="阿里云 OSS" name="aliyun">
        <el-form ref="form" :model="form" style="width: 95%;" label-width="130px">
          <el-form-item label="ossServer">
            <el-input v-model="form.oss.ossServer"></el-input>
          </el-form-item>
          <el-form-item label="ossServerInternal">
            <el-input v-model="form.oss.ossServerInternal"></el-input>
          </el-form-item>
          <el-form-item label="Appid">
            <el-input v-model="form.oss.AccessKeyId"></el-input>
          </el-form-item>
          <el-form-item label="appKey">
            <el-input v-model="form.oss.AccessKeySecret"></el-input>
          </el-form-item>
          <el-form-item label="Bucket名">
            <el-input v-model="form.oss.BucketName"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">确认保存</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="腾讯云 COS" name="Tencent">
        <el-form ref="form" :model="form" style="width: 95%;" label-width="130px">
          <el-form-item label="version">
            <el-input v-model="form.cos.version"></el-input>
          </el-form-item>
          <el-form-item label="api_cos_api_end_point">
            <el-input v-model="form.cos.api_cos_api_end_point"></el-input>
          </el-form-item>
          <el-form-item label="Appid">
            <el-input v-model="form.cos.app_id"></el-input>
          </el-form-item>
          <el-form-item label="appKey">
            <el-input v-model="form.cos.secret_key"></el-input>
          </el-form-item>
          <el-form-item label="user_agent">
            <el-input v-model="form.cos.user_agent"></el-input>
          </el-form-item>
          <el-form-item label="time_out">
            <el-input v-model="form.cos.time_out"></el-input>
          </el-form-item>
          <el-form-item label="location">
            <el-input v-model="form.cos.location"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">确认保存</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>

      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "Update",
  data() {
    return {
      top_checked: ["阿里云 OSS"],
      activeName:'aliyun',
      form: {
        oss: {
          ossServer: "",
          ossServerInternal: "",
          AccessKeyId: "",
          AccessKeySecret: "",
          BucketName: "",
        },
        cos: {
          version:"",
          api_cos_api_end_point:"",
          app_id:"",
          secret_id:"",
          secret_key:"",
          user_agent:"",
          time_out:"",
          location:""
        }
      }
    };
  },
  methods:{
    handleClick(){},
    onSubmit(){
      console.log(this.form)
    }
  }
};
</script>
<style lang="scss" scoped></style>
